import { State } from "@/redux/interface"
import { Layout } from "antd"
import { useSelector } from "react-redux"
import AssemblySize from "./components/AssemblySize"
import AvatarIcon from "./components/AvatarIcon"
import BreadcrumbNav from "./components/BreadcrumbNav"
import CollapseIcon from "./components/CollapseIcon"
import Fullscreen from "./components/Fullscreen"
import Language from "./components/Language"
import Theme from "./components/Theme"
import "./index.less"

const LayoutHeader = () => {
    const {Header} = Layout
    const {userInfo} = useSelector((state:State) => state.global)

    return (
        <Header>
            <div className="header-lf">
                <CollapseIcon />
                <BreadcrumbNav />
            </div>
            <div className="header-ri">
                <AssemblySize />
                <Language />
                <Fullscreen />
                <Theme />
                <span className="username">{userInfo.userName}</span>
                <AvatarIcon />
            </div>
        </Header>
    )
}

export default LayoutHeader